import styled from "@emotion/styled"
import { useModalSlideUp } from "@/features/useModal"
import { SvgComponent } from "@/components/base/Svg"

const NewsDetailContainer = styled.div`
    width: 100%;
    height: 100%;
    max-height: 90vh;
    position: relative;
    padding: 16rem;
    border-top-left-radius: 12rem;
    border-top-right-radius: 12rem;
    background-color: #ffffff;
`

const DetailTitle = styled.div`
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 18rem;
    letter-spacing: 0%;
    text-align: center;
`
const DetailClose = styled(SvgComponent("pages/UserCenterPage/cancel_icon.svg"))`
    width: 24rem;
    height: 24rem;
    position: absolute;
    top: 16rem;
    right: 16rem;
`
const NewsTitle = styled.div`
    font-family: Gilroy;
    font-weight: 500;
    font-size: 20rem;
    letter-spacing: 0%;
    text-transform: capitalize;
    padding-top: 16rem;
`

const DetailAuthorLine = styled.div`
    display: flex;
    align-items: center;
    padding-bottom: 24rem;
`
const AuthorAvatar = styled.img`
    width: 20rem;
    height: 20rem;
`
const AuthorName = styled.div`
    font-family: "Gilroy";
    font-weight: 400;
    font-size: 14rem;
    letter-spacing: 0%;
    margin-left: 6rem;
    margin-right: 16rem;
`
const AuthorTime = styled.div`
    font-family: "Gilroy";
    font-weight: 400;
    font-size: 14rem;
    letter-spacing: 0%;
`

const DetailContent = styled.div`
    font-family: "Gilroy";
    font-weight: 400;
    font-size: 16rem;
    letter-spacing: 0%;
    margin-bottom: 48rem;

    max-height: calc(90vh - 200rem);
    overflow-y: auto;
    padding-right: 2rem;
`
const ButtonGroup = styled.div`
    display: flex;
    justify-content: center;
    align-items: center;
    background: #e8e9ea;
    padding: 16rem;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 2;
`

const Buttons = styled.div`
    padding: 6rem 12rem;
    display: flex;
    align-items: center;
    border: rgba(5, 75, 240, 1) 1rem solid;
    border-radius: 4rem;
    background: #ffffff;
    &:first-of-type {
        margin-right: 11rem;
    }
`
const RightArrow = styled(SvgComponent("pages/UserCenterPage/blue_right_arrow.svg"))`
    transform: rotate(180deg);
    width: 20rem;
    height: 20rem;
`
const LeftArrow = styled(SvgComponent("pages/UserCenterPage/blue_right_arrow.svg"))`
    width: 20rem;
    height: 20rem;
`
const ButtoneText = styled.div`
    font-family: "Gilroy";
    font-weight: 500;
    font-size: 14rem;
    letter-spacing: 0%;
    text-align: center;
    text-transform: capitalize;
    width: 86rem;
`

export default function NewsDetails() {
    const { close: closeModal } = useModalSlideUp("account-page")
    return (
        <NewsDetailContainer>
            <DetailTitle>Details</DetailTitle>
            <NewsTitle></NewsTitle>
            <DetailAuthorLine>
                <AuthorAvatar src={""}></AuthorAvatar>
                <AuthorName>Filbet</AuthorName>
                <AuthorTime>9.22.2024</AuthorTime>
            </DetailAuthorLine>
            <DetailContent>
                DASMARIÑAS CITY, Cavite – The Philippine Amusement and Gaming Corporation (PAGCOR)
                inaugurated here Wednesday, September 18, its 41st completed Socio-Civic Center
                three years after its groundbreaking in October 2021.
                <br />
                The three-story modern structure was built with a Php50 million grant from PAGCOR
                and is the only socio-civic facility with complement funding from the city
                government, bringing the total project cost to Php110 million.
                <br />
                It is also the only socio-civic facility that is equipped with an elevator to help
                elderly and physically challenged visitors to reach its higher floors with ease.
                <br />
                PAGCOR VP for Corporate Social Responsibility Group Ramon Stephen Villaflor and
                Dasmariñas City Mayor Jennifer Barzaga led the unveiling of the state-of-the-art
                structure in Sitio Buwisan, Barangay Langkaan II.
                <br />
                PAGCOR VP for Corporate Social Responsibility Group Ramon Stephen Villaflor and
                Dasmariñas City Mayor Jennifer Barzaga led the unveiling of the state-of-the-art
                structure in Sitio Buwisan, Barangay Langkaan II.
            </DetailContent>
            <ButtonGroup>
                <Buttons>
                    <RightArrow />
                    <ButtoneText>Previous</ButtoneText>
                </Buttons>
                <Buttons>
                    <ButtoneText>Next</ButtoneText>
                    <LeftArrow />
                </Buttons>
            </ButtonGroup>
            <DetailClose onClick={closeModal}></DetailClose>
        </NewsDetailContainer>
    )
}
